<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业三表格数据的维护基础版</title>
	</head>
	<body>
		<div>纪录列表
			<br><br>姓名：<input type="text" /> 年龄：<input type="text" /> 
			<button onclick="testadd()">添加</button>
			<br><br>
			姓名：<input type="text" placeholder="姓名" />
			<button onclick="testselect()">搜索</button><br><br>
			<table style="border: 1px solid black; width: 600px;">
				<thead>
					<tr>
						<th style="width:15%;text-align: center;">ID</th>
						<th style="width:30%;text-align: left;">姓名</th>
						<th style="width:30%;text-align: left;">年龄</th>
						<th style="width:25%;text-align: left ;">操作</th>
					</tr>
				</thead>
				<tbody id="tbody"></tbody>
			</table>
		</div>
		
		<script type="text/javascript">
			//获取收入框里面的数据
			//可以根据标签名TagName，来找寻input标签构成的dom对象，组合成的数组
			//inputs中包含三个元素
			var inputs=document.getElementsByTagName("input");
			var id=1;
			function testadd(){
				//input输入的内容直接  .value就可以获取出来
				var i0=inputs[0].value;
				var i1=inputs[1].value;
				/* //判断
				if(i0==''||i1==''||/\D+/.test(i0)||/\d+/.test(i1)){
					alert("请正确填写信息")
					return;//下面的代码不需要执行了
				} */
				//放入表格
				var html=""
				+"<tr>"
				+"<td>"+ id++ +"</td>"
				+"<td>"+ i0 +"</td>"
				+"<td>"+ i1 +"</td>"
				+"<td><a href='javascript:;' onclick='testdel(this)'>删除</a>  <a href='javascript:;' onclick='testupd(this)'>修改</a></td>"
				+"</tr>"	
				//放入tbody
				//通过dom方式找到tbody对象
				var tbody=document.getElementById("tbody");
				tbody.innerHTML += html;
			}
			
			function testdel(obj){
				//指定的一行记录删掉
				//obj是<a>标签所对应的dom对象；parentNode上一级节点
				//<a>标签的上一及是<td>,<td>的上一级是<tr>--obj.parentNode.parentNode;
				//通过标签的关系来找
				var tr=obj.parentNode.parentNode;
				if(confirm("是否删除该行记录？")){
					document.getElementById("tbody").removeChild(tr);
			    }
			}
			
			function testupd(obj){
				//找
				var tdthis = obj.parentNode;
				var tdage =  tdthis.previousSibling;//age所在的td
				var tdname = tdage.previousSibling;
				var tdid = tdname.previousSibling;
				//找到之后修改里面的内容
				tdage.innerHTML="<input type='text' id='tAge"+tdid+"' value='"+tdage.innerHTML+"'/>"
				tdname.innerHTML="<input type='text' id='tName"+tdid+"' value='"+tdname.innerHTML+"'/>"
				tdthis.innerHTML="<a href='javascript:;'>保存</a>"
				tdthis.getElementsByTagName("a")[0].onclick=function(){
					tdage.innerHTML=document.getElementById('tAge'+tdid).value;
					tdname.innerHTML=document.getElementById('tName'+tdid).value;
					tdthis.innerHTML="<a href='javascript:;' onclick='testdel(this)'>删除</a>  <a href='javascript:;' onclick='testupd(this)'>修改</a>"				    
				}
			}
			
			function testselect(){
				var trs=document.getElementsByTagName("tr");//表格中的数据都放在tr里
				var len=trs.length;
				for(var i=1;i<len;i++){
					trs[i].removeAttribute("style");//把对应的样式去掉
				}
				var i2=inputs[2].value;
				if(i2==''){
					return;
				}
				for(var i=1;i<len;i++){//遍历tr  第一行tr 不用遍历
				    var tname=trs[i].cells[1].innerHTML;
					//姓名这一列
					if(tname.indexOf(i2)>-1){//模糊匹配
						trs[i].style.backgroundColor='greenyellow';
					}	
				}
			}
						
		</script>
	</body>
</html>
